<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
		<title>订单完善</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" /> -->
		
		<link rel="stylesheet" href="/wechat/css/vantIndex.css">

		<!-- 自定义样式 -->
		<style>
			body {
				background-color: #f3f3f3;
				overflow: hidden;
				font-size: 10px;
			}

			#app {
				height: 100vh;
				background-image: url('../image/img/bgaddStu.png');
				background-size: contain;
				background-repeat: no-repeat;
			}

			.content-div {
				background-color: #fff;
				margin: 1rem;
				border-radius: 20px;
				box-shadow: 0 5px #e6e6e6;
				padding: 1rem;
				overflow-y: auto;
			}

			.filter-div {
				text-align: center;
				display: flex;
				justify-content: center;
				padding: 0.6rem 0;
				border: 1px solid #2382fd;
				color: #2382fd;
				font-weight: bold;
				border-radius: 10px;
			}

			.educational-head {
				width: 90%;
			}

			.content-box {
				display: block;
				overflow: auto;
				height: 32rem;
				button {
					/* width: 50px; */
					font-size: 12px;
					padding: 2px 4px;
				}
			}

			.title {
				color: #1b1615;
				font-size: 0.8rem;
				height: 34px;
				line-height: 34px;

			}

			.van-col {
				text-align: center;
			}

			.button-div {
				margin-left: 1rem;
				margin-top: 0.6rem;
			}
			
			
			
			.order-dialog {
			  padding: 24px 16px;
			}
			
			.icon-container {
			  display: flex;
			  justify-content: center;
			  margin-bottom: 24px;
			}
			
			.order-input {
			  margin-bottom: 24px;
			  border: 1px solid #cccccc;
			  overflow: hidden;
			  border-radius: 10px;
			}
			
			.order-input :deep(.van-field__control) {
			  text-align: center;
			}
			
			.button-group {
			  display: flex;
			  gap: 12px;
			}
			
			.submit-btn {
			  background: linear-gradient(to right, #ffd60a, #ffb302);
			  border: none;
			}
			
			.cancel-btn {
			  border: none;
			  color: #666;
			  background: #f5f5f5;
			}
			
			/* 暗黑模式支持 */
			@media (prefers-color-scheme: dark) {
			  .cancel-btn {
			    background: #2c2c2e;
			    color: #fff;
			  }
			}
			.backtn-div {
				font-size: 1.4rem;
				padding: 0.4rem 0.6rem;
				background-color: #ffc526;
			}
		</style>
	</head>

	<body style="font-size: 12px;">
		<div id="app">
			<div class="backtn-div">
				<van-icon name="arrow-left" @click="goBack" />
			</div>
			<div>
				<van-search v-model="searchValue" @blur="onSearch" shape="round"
					background="linear-gradient(to right, #ffc526, #ffa248)" placeholder="请输入学生姓名查询" />
			</div>
			<div class="button-div"><van-button type="primary" @click="showCoursePicker = true"
					size="small">选择课程</van-button></div>
			<div class="content-div">
				<div class="filter-div">
					<div class="educational-head">
						<van-row type="flex" justify="space-around">
							<van-col span="2">
								序号
							</van-col>
							<van-col span="5">
								学生姓名
							</van-col>
							<van-col span="5">
								报名课程
							</van-col>
							<van-col span="7">
								订单状态
							</van-col>
							<van-col span="5">
								操作
							</van-col>
						</van-row>
					</div>
				</div>
				<div class="content-box">
					<!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh" > -->
					<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onToLoad">
						<van-cell v-for="(item, index) in list" :key="index">
							<div
								style=" border-radius: 10px; padding: 0.1rem 0.1rem; margin: 1px 0; background-color: #ffedbd; ">
								<van-row type="flex" justify="space-around">
									<van-col span="2">
										<div class="title">{{index + 1}}</div>
									</van-col>
									<van-col span="5">
										<div class="title">{{item.personName}}</div>
									</van-col>
									<van-col span="5">
										<div class="title">{{setConvert(item.courseNames)}}</div>
									</van-col>
									<van-col span="7">
										<div class="title">{{examineList[item.examine]}}
										<van-button v-if="item.examine == 3"
												@click="showSeeClick(item)"
												style="color: #ef5d51; height: 30px; border: 1px solid #ef5d51; font-size: 0.7rem;"
												color="linear-gradient(to bottom, #fffbff, #f7d1bf) #ef5d51">查看</van-button>
										</div>
									</van-col>
									<van-col span="5">
										<div v-if="item.examine == 0 || item.examine == 3"><van-button
												@click="showSubmitOjb(item)"
												style="color: #ef5d51; height: 30px; border: 1px solid #ef5d51; font-size: 0.7rem;"
												color="linear-gradient(to bottom, #fffbff, #f7d1bf) #ef5d51">提交单号</van-button>
										</div>
										<div v-else><van-button
												style="color: #9d9c98; height: 30px; border: 1px solid #9d9c98; font-size: 0.7rem;"
												color="linear-gradient(to bottom, #fffbff, #9d9c98) #9d9c98">提交单号</van-button>
										</div>
									</van-col>
								</van-row>
							</div>
						</van-cell>
					</van-list>
					<!-- </van-pull-refresh> -->
				</div>
			</div>


			<van-popup v-model:show="showCoursePicker" position="bottom" >
				<van-picker :columns="course" @confirm="onCourseConfirm" @cancel="showCoursePicker = false" show-toolbar
					title="选择课程" />
			</van-popup>



			<van-popup v-model:show="showSee" round position="center" :style="{ width: '80%' }">
				<div class="order-dialog">
					<!-- 图标 -->
					<div class="icon-container">
						<van-icon name="description" color="#1989fa" :size="48" />
					</div>
					<van-cell-group inset style="text-align: center;">
						{{nodeString}}
					</van-cell-group>
					<div class="button-group">
<!-- 						<van-button round block type="primary" class="submit-btn" @click="handleSubmit">
							提交
						</van-button> -->
						<van-button round block class="cancel-btn" @click="handleCancel2">
							取消
						</van-button>
					</div>
				</div>
			</van-popup>

			<van-popup v-model:show="showSubmit" round position="center" :style="{ width: '80%' }">
				<div class="order-dialog">
					<!-- 图标 -->
					<div class="icon-container">
						<van-icon name="description" color="#1989fa" :size="48" />
					</div>
					<van-cell-group inset>
					  <van-field v-model="OjbOrder.tradeNo" placeholder="请输入订单号" class="order-input" />
					</van-cell-group>
					<div class="button-group">
						<van-button round block type="primary" class="submit-btn" @click="handleSubmit">
							提交
						</van-button>
						<van-button round block class="cancel-btn" @click="handleCancel">
							取消
						</van-button>
					</div>
				</div>
			</van-popup>



		</div>

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<!-- 		<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
		<script src="/wechat/js/vue@3.js"></script>
		<script src="/wechat/js/vant.min.js"></script>
		
		<script src="/scriptZIP/axios.min.js"></script>
		<!-- <script src="/js/common.js"></script> -->


		<script>
			// 初始化 Vue 实例
			const app = Vue.createApp({
				data() {
					return {
						searchValue: '',
						loading: true,
						finished: false,
						list: [],
						course: [],
						examineList: ['未提交', '待审核', '已通过', '拒绝'],
						studentStatus: '在读',
						schoolId: '',
						agentId: '',
						refreshing: false,
						pageNum: 1,
						pageSize: 10,
						OjbList: {},
						showCoursePicker: false,
						showSee: false,
						showSubmit: false,
						courseId: '',
						OjbOrder: {},
						orderNumber: '',
						applicantId: '',
						teacher: [],
						nodeString: ''
					};
				},
				created: function() {
					this.schoolId = localStorage.getItem('schoolId');
					this.agentId = localStorage.getItem('agentId');
					this.teacher = JSON.parse(sessionStorage.getItem('hxt-teacher'));
					this.getCourse()
					this.getList()

				},
				methods: {
					filterclick(st) {
						this.studentStatus = st;
						this.list = []
						this.pageNum = 1
						// this.finished = false;
						this.getList()
					},
					showSeeClick(item) {
						this.nodeString = item.auditReason
						this.showSee = true
					},
					handleCancel2 () {
						this.showSee = false
					},
					handleSubmit() {
						let formData = new FormData();
						formData.append('tradeNo', this.OjbOrder.tradeNo);
						formData.append('applicantId', String(this.teacher.id));
						axios.post('/t/order/updateTypeWx/' + this.OjbOrder.id, formData).then(function (res) {
							this.showSubmit = false
						}.bind(this));
					},
					handleCancel() {
						this.showSubmit = false
					},
					showSubmitOjb(value) {
						this.OjbOrder = value
						this.showSubmit = true
					},
					onToLoad() {
						this.loading = true;
						setTimeout(() => {
							// if (this.refreshing) {
							//   this.list = [];
							//   this.refreshing = false;
							// }
							// this.refreshing = false;
							// for (let i = 0; i < 10; i++) {
							//   this.list.push(this.list.length + 1);
							// }
							this.loading = false;
							this.finished = true;
							// this.pageNum += 1;
							// this.pageNum += 1;

							this.getList()

							// 		if (this.list.length >= 40) {
							// 		  finished.value = true;
							// 		}
						}, 1000);
					},
					onCourseConfirm({
						selectedValues,
						selectedOptions
					}) {
						this.courseId = selectedOptions[0].value;
						this.pageNum = 1
						this.list = []
						this.getList()
						this.showCoursePicker = false
					},
					setConvert(value) {
						return value.join(',')
					},
					getCourse() {
						axios.get('/t/course/all/' + this.agentId).then(function(res) {
							res.data.forEach((item, index) => {
								this.course.push({
									'text': item.name,
									'value': item.id
								})
							});

						}.bind(this));
					},
					onRefresh() {
						this.Loading = true;
						this.finished = false;
						this.pageNum = 1;
						this.list = [];
						this.onToLoad()

					},
					goUrl(url) {
						window.location = url
					},
					goBack() {
						history.back();
					},
					onSearch() {
						this.list = []
						this.refreshing = true
						this.pageNum = 1
						this.getList()
					},
					getList() {
						axios.get('/t/order/manualList', {
							params: {
								schoolId: this.schoolId,
								studentName: this.searchValue,
								courseId: this.courseId,
								pageNum: this.pageNum,
								pageSize: this.pageSize
							}
						}).then(function(res) {
							this.OjbList = res.data
							res.data.list.forEach(item => {
								this.list.push(item)
							});
							this.loading = false;
							this.finished = true;
							if (this.list.length >= this.OjbList.total) {
								this.finished = true; // 没有更多数据了
							} else {
								this.finished = false;
								this.pageNum++;
							}
							// this.finished = true; // 没有更多数据了
							// console.log('33344', this.list.length, res.data.total)
							// if (this.list.length >= res.data.total) {
							//   this.finished = true; // 没有更多数据了
							// } else {
							//   this.pageNum += 1;
							//   }
						}.bind(this));
					},

				},
			});

			app.use(vant);
			app.mount("#app");
		</script>
	</body>
</html>